<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="80vw" destroy-on-close :close-on-press-escape="mode != 'show' ? false : true"
			   @closed="$emit('closed')" align-center :close-on-click-modal="false">
		<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="100" label-position="right">
			<el-row :gutter="1">
				<el-col :span="6">
					<el-form-item label="生产计划单" prop="plan_id">
						<el-input v-model="plan_code" placeholder="请选择生产计划单" readonly @click="checkPlan"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="发货单号" prop="deliver_code">
						<el-input v-model="form.deliver_code" placeholder="发货单号(不填写自动生成)" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="发货日期" prop="deliver_date">
						<el-date-picker v-model="form.deliver_date" type="date" placeholder="请选择日期" :value-format="'YYYY-MM-DD'" style="width:100%"/>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="6">
					<el-form-item label="供应商" prop="supplier_id">
						<el-select v-model="form.supplier_id" placeholder="请选择" filterable>
							<el-option v-for="item in applyList" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"></el-option>
						</el-select>
					</el-form-item>
				</el-col> -->
			</el-row>
			<el-row :gutter="1">
				<el-col :span="6">
					<el-form-item label="倒冲领料" prop="is_inverted">
						<el-switch v-model="form.is_inverted" :active-value="1" :inactive-value="0"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="原料仓库" prop="material_ware" v-if="form.is_inverted == 1">
						<el-select v-model="form.material_ware" filterable style="width: 100%" placeholder="仓库" clearable>
							<el-option v-for="item in wareList" :key="item.id" :label="item.ware_name" :value="item.id"/>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="1">
				<el-col :span="12">
					<el-form-item label="备注" prop="remark">
						<el-input v-model="form.remark" placeholder="备注" type="textarea" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="附件" prop="enclosure">
						<sc-upload-file v-model="form.enclosure" :limit="1">
							<el-button type="primary" icon="el-icon-upload">选择文件</el-button>
						</sc-upload-file>
					</el-form-item>
				</el-col>
			</el-row>
			<el-col :span="24">
				<el-form-item label="产品清单" prop="detail">
					<sc-form-table ref="table" v-model="form.detail" :addTemplate="addTemplate" placeholder="暂无数据" height="450" hideAdd>
						<el-table-column prop="goods_code" label="商品编码" align="center">
							<template #default="scope">
								{{ scope.row.goods_code }}
							</template>
						</el-table-column>
						<el-table-column prop="goods_name" label="商品名称" align="center">
							<template #default="scope">
								{{ scope.row.goods_name }}
							</template>
						</el-table-column>
						<el-table-column prop="goods_model" label="商品型号" align="center">
							<template #default="scope">
								{{ scope.row.goods_model }}
							</template>
						</el-table-column>
						<el-table-column prop="goods_spec" label="商品规格" align="center">
							<template #default="scope">
								{{ scope.row.goods_spec }}
							</template>
						</el-table-column>
						<el-table-column prop="unit_name" label="单位" align="center">
							<template #default="scope">
								{{ scope.row.unit_name }}
							</template>
						</el-table-column>
						<el-table-column label="生产数量" prop="plan_number" align="center">
						</el-table-column>
						<el-table-column label="可发货数量" prop="can_number" align="center">
						</el-table-column>
						<el-table-column label="本次发货数量" prop="number" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.number" placeholder="本次发货数量" @focus="onFocus($event)" @input="sendInput(scope.row)"></el-input>
							</template>
						</el-table-column>
					</sc-form-table>
				</el-form-item>
			</el-col>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit(0)">保 存</el-button>
			<el-button v-if="mode == 'add' || mode == 'send'" type="primary" :loading="isSaveing" @click="submit(1)">保存并审核</el-button>
		</template>
	</el-dialog>
	<select-plan v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" :query="{status:1}"></select-plan>
</template>

<script>
import selectPlan from '../plan/selectPlan.vue';

export default {
	components: {selectPlan},
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增发货单',
				edit: '编辑发货单',
				show: '查看',
				send: '发货'
			},
			visible: false,
			isSaveing: false,
			dialog: {
				save: false,
			},
			//表单数据
			form: {
				id: "",
				deliver_code: "",
				deliver_date: this.moment().format('YYYY-MM-DD'),
				enclosure: "",
				remark: "",
				detail: [],
				plan_id: "",
				is_inverted: "",
				material_ware: "",
			},
			plan_code: "",
			//验证规则
			rules: {
				plan_id: [{required: true, message: '请选择生产计划单'}],
			},
			applyList: [],
			wareList: [],
		}
	},
	mounted() {
		this.getApply();
		this.getWare()
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit(e) {
			this.form.is_check = e
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = []
					if (this.form.id) {
						res = await this.$API.production.send.edit.post(this.form);
					} else {
						res = await this.$API.production.send.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data) {
			this.form.id = data.id
			var res = await this.$API.production.send.detail.get({id: data.id});
			this.form.deliver_code = res.data.deliver_code
			this.form.deliver_date = res.data.deliver_date
			this.form.plan_id = res.data.plan_id
			this.plan_code = res.data.plan.production_code
			this.form.enclosure = res.data.enclosure
			this.form.remark = res.data.remark
			this.form.is_inverted = res.data.is_inverted
			this.form.material_ware = res.data.material_ware
			let array = []
			res.data.detail.map(item => {
				array.push({
					id: item.id,
					goods_id: item.goods_id,
					goods_code: item.goods && item.goods.goods_code,
					goods_name: item.goods && item.goods.goods_name,
					goods_spec: item.goods && item.goods.goods_spec,
					goods_model: item.goods && item.goods.goods_model,
					unit_name: item.goods && item.goods.unit && item.goods.unit.unit_name,
					plan_number: item.plan_num.number,
					can_number: item.plan_num.number - (item.plan_num.deliver_number + item.plan_num.enter_number),
					number: item.number
				})
			})
			this.form.detail = array
		},
		onFocus(event) {
			event.target.select();
		},
		// 供应商列表
		async getApply() {
			var res = await this.$API.apply.apply.all.get();
			this.applyList = res.data
		},
		checkPlan() {
			if (this.mode == 'send') {
				return;
			}
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add')
			})
		},
		handleSuccess(data) {
			this.form.plan_id = data.id
			this.plan_code = data.production_code
			this.getDetail(data.id)
		},
		async getDetail(e) {
			var res = await this.$API.production.plan.detail.get({id: e})
			let array = []
			res.data.detail.map(item => {
				array.push({
					id: item.id,
					goods_id: item.goods_id,
					goods_code: item.goods && item.goods.goods_code,
					goods_name: item.goods && item.goods.goods_name,
					goods_spec: item.goods && item.goods.goods_spec,
					goods_model: item.goods && item.goods.goods_model,
					unit_name: item.goods && item.goods.unit && item.goods.unit.unit_name,
					plan_number: item.number,
					can_number: item.number - item.deliver_number,
					number: item.number - item.deliver_number,
				})
			})
			this.form.detail = array
		},
		// 获取仓库
		async getWare() {
			var res = await this.$API.goods.ware.all.get();
			this.wareList = res.data;
		},
		sendInput(row) {
			if (row.number > row.can_number) {
				this.$message.error("发货数量不能大于可发货数量")
				row.number = row.can_number
			}
		},
	}
}
</script>

<style></style>
